<template>
  <div id="app" >
    <main-tab-bar v-if="$store.state.isTabBarShow"/>
  <transition appear mode="out-in">
       <router-view/>
  </transition>
    </div>
  </div>
</template>

<script>
import MainTabBar from '@/components/content/MainTabBar'
export default {
  components: { MainTabBar },
  name: 'App'
}
</script>

<style lang="scss">
@import 'assets/css/global.css';

@keyframes animate {
  0% {
    transform: translateY(20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.v-enter-active {
  animation: animate 0.7s;
}
.v-leave-active {
  animation: animate 0.7s reverse;
}
.toast1 {
  min-height: 0.48rem !important;
  min-width: 0.48rem !important;
  font-size: 0.3rem !important;
}
.mainToast {
  min-height: 0.35rem !important;
  max-width: 0.35rem !important;
}
</style>